<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!-- Title -->
    <title>The Palatin - Hotel &amp; Resort Template</title>
    <!-- Favicon -->
    <link rel="icon" href="img/core-img/favicon.ico">
    <!-- Core Stylesheet -->
    <link rel="stylesheet" href="style.css">
	<!-- jQuery-2.2.4 js -->
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    
	</head>
	<body>
		 <!-- Preloader -->
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="cssload-container">
            <div class="cssload-loading"><i></i><i></i><i></i><i></i></div>
        </div>
    </div>

     <!-- ##### Header Area Start ##### -->
    <header class="header-area">
        <!-- Navbar Area -->
        <div class="palatin-main-menu">
            <div class="classy-nav-container breakpoint-off">
                <div class="container">
                    <!-- Menu -->
                    <nav class="classy-navbar justify-content-between" id="palatinNav">

                        <!-- Nav brand -->
                       <a href="index.jsp" class="nav-brand" style="margin-left: -154px;">竹里馆民宿</a>
                             <!--   天气预报 -->
                               <!--  <div class="pool-feature">
                                	<input type="text" name="input"/>
                                    <a href="#" class="nav-brand" data-toggle="modal" data-target="#myModal0" id="wether">天气预报</a>
                                </div>   -->

                        <!-- Navbar Toggler -->
                        <div class="classy-navbar-toggler">
                            <span class="navbarToggler"><span></span><span></span><span></span></span>
                        </div>

                        <!-- Menu -->
                        <div class="classy-menu">

                            <!-- close btn -->
                            <div class="classycloseIcon">
                                <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                            </div>

                            <!-- Nav Start -->
                            <div class="classynav">
                                <ul>
                                    <li><a href="login.jsp">登录</a></li>
                                    <li><a href="register.jsp">注册</a></li>
                                </ul>

                                <!--  个人中心菜单栏     -->           
	                             <ul>	                                    
	                                <li><a href="#">个人中心</a>
	                                        <ul class="dropdown">
	                                            <li><a href="#" class="personalData login">个人信息</a></li>
	                                            <li><a href="#" class="orderInfo login">订单详情</a></li>
	                                            <li><a href="#" class="collectionInfo login">个人收藏</a></li>
	                                            <li><a href="#" class="updatePassword login">修改密码</a></li>
	                                            <li><a href="login.jsp" class="outLogin">切换账号</a></li> 
	                                        </ul>
	                                </li>                                   
	                             </ul>  
	                                <!--   天气预报 -->
                                <ul>
                                	<!-- <input type="text" name="input"/> -->
                                    <li><a href="#" class="nav-brand" data-toggle="modal" data-target="#myModal0" id="wether">天气预报</a></li>
                                </ul>                               
                            </div>
                            <!-- Nav End -->
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <!-- ##### Header Area End ##### -->

        <!-- ##### Contact Area End ##### -->

    <!-- ##### Contact Form Area Start ##### -->
    <section class="contact-form-area mb-100">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-heading">
                        <div class="line-"></div>
                        <br />
                        <br />
                        <br />
                        <br />
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <!-- Contact Form -->
                    
                     <form action="${pageContext.request.contextPath}/CommentServlet?orderId=${param.orderId}" method="post">
                     <!-- 隐藏的请求方法参数 -->
                        <input type="hidden" name="op" value="addComment">
                        <div class="row">
                        <div>民宿评价：</div>
<!-- ##############################星级评价  start###############################-->
                          <div>
			                 <a href="javascript:click(1)"><img src="img/comment-img/star.png" id="star1" onMouseOver="over(1)" onMouseOut="out(1)" height="20px" width="20px"/></a>
			                 <a href="javascript:click(2)"><img src="img/comment-img/star.png" id="star2" onMouseOver="over(2)" onMouseOut="out(2)" height="20px" width="20px"/></a>
			                 <a href="javascript:click(3)"><img src="img/comment-img/star.png" id="star3" onMouseOver="over(3)" onMouseOut="out(3)" height="20px" width="20px"/></a>
			                 <a href="javascript:click(4)"><img src="img/comment-img/star.png" id="star4" onMouseOver="over(4)" onMouseOut="out(4)" height="20px" width="20px"/></a>
			                 <a href="javascript:click(5)"><img src="img/comment-img/star.png" id="star5" onMouseOver="over(5)" onMouseOut="out(5)" height="20px" width="20px"/></a>
			                 <span id="messageInfo"></span>
		                  </div>
		                  <br/>
		                  <br/>
		                  <br/>
		                  <!-- 隐藏的星级评价参数 -->
		                  <input type="hidden" name="score" id="score" />
<!-- ##############################星级评价   end###############################-->
                            <div class="col-12">
                                <textarea name="message" class="form-control" id="message" cols="30" rows="10" placeholder="写出您的真实感受，可以帮助更多小伙伴哦~"></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn palatin-btn mt-50">立即评价</button>
                            </div>
                        </div>
                     </form>
                </div>
            </div>
        </div>
    </section>
    <!-- ##### Contact Form Area End ##### -->
    
    <!-- ##### Footer Area Start ##### -->
    <footer class="footer-area">
        <div class="container">
            <div class="row">

                <!-- Footer Widget Area -->
                <div class="col-12 col-lg-5">
                    <div class="footer-widget-area mt-50">
                        <a href="#" class="d-block mb-5"><img src="img/core-img/logo.png" alt=""></a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris sceleri sque, at rutrum nulla dictum. Ut ac ligula sapien. Suspendisse cursus faucibus finibus. </p>
                    </div>
                </div>

                <!-- Footer Widget Area -->
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="footer-widget-area mt-50">
                        <h6 class="widget-title mb-5">Find us on the map</h6>
                        <img src="img/bg-img/footer-map.png" alt="">
                    </div>
                </div>

                <!-- Footer Widget Area -->
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="footer-widget-area mt-50">
                        <h6 class="widget-title mb-5">Subscribe to our newsletter</h6>
                        <form action="#" method="post" class="subscribe-form">
                            <input type="email" name="subscribe-email" id="subscribeemail" placeholder="Your E-mail">
                            <button type="submit">Subscribe</button>
                        </form>
                    </div>
                </div>

                <!-- Copywrite Text -->
				<div class="col-12">
					<div class="copywrite-text mt-30">
						<p>
							<a href="#">
								Copyright &copy;
								<script>
									document.write(new Date().getFullYear());
								</script>
								All rights reserved | This template is made with 
								<i class="fa fa-heart-o" aria-hidden="true"></i> by 
								<a href="https://colorlib.com" target="_blank">Colorlib</a>
						</p>
					</div>
				</div>
			</div>
        </div>
    </footer>
    <!-- ##### Footer Area End ##### -->

    <!-- ##### All Javascript Script ##### -->
    <!-- Popper js -->
    <script src="js/bootstrap/popper.min.js"></script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <!-- All Plugins js -->
    <script src="js/plugins/plugins.js"></script>
    <!-- Active js -->
    <script src="js/active.js"></script>
    
    <!-- 模态框 -->                            
										 
		<!-- 模态框1：用户个人信息 -->
		<div class="modal fade" id="myModal1">
			<div class="modal-dialog">
				<div class="modal-content">
											 
					<!-- 模态框头部 -->
						<div class="modal-header">
						<h4 class="modal-title">个人中心</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
													 
					<!-- 模态框主体 -->
						<div class="modal-body">
							<p>用户头像：</p>
							<p>用户名： <input type="text" name="username"/></p>
							<p>性别：<input type="text" name="userSex" style="margin-left:17px"/></p>
							<p>电话：<input type="text" name="userPhone" style="margin-left:17px"/></p>
						</div>
													 
					<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						</div>											 
			  </div>
			</div>
		</div>
		
		<!-- 模态框2：订单信息 -->
		<div class="modal fade" id="myModal2">
			<div class="modal-dialog">
				<div class="modal-content">
											 
					<!-- 模态框头部 -->
						<div class="modal-header">
						<h4 class="modal-title">订单详情</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
													 
					<!-- 模态框主体 -->
						<div class="modal-body">
							<table border="1" style="width: 100%;margin: 10px 0;">	
								<tr align="center">
								<!-- 订单编号（民宿编号+房间号+日期）订单名称（民宿名+房号） 总价格 支付状态（未支付 去支付） 添加时间   操作（修改、删除） -->
									<td>订单编号</td>
									<td>订单名称</td>
									<td>总价格</td>
									<td>支付状态</td>
									<td>添加时间</td>
									<td>操作</td>
								</tr>
								<tr align="center">								
									<td>1</td>
									<td>1</td>
									<td>1</td>
									<td>1</td>
									<td>1</td>
									<td>
									    <a href="#">修改</a>&nbsp;&nbsp;
									    <a href="#">删除</a>
									</td>
								</tr>
							</table>
						</div>
													 
					<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						</div>											 
			  </div>
			</div>
		</div>
		
		<!-- 模态框3：收藏信息 -->
		<div class="modal fade" id="myModal3">
			<div class="modal-dialog">
				<div class="modal-content">
											 
					<!-- 模态框头部 -->
						<div class="modal-header">
						<h4 class="modal-title">个人收藏</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
													 
					<!-- 模态框主体 -->
						<div class="modal-body">
							<table border="1" style="width: 100%;margin: 10px 0;">	
								<tr align="center">
								<!-- 收藏信息：（收藏编号 + 收藏的民宿 + 收藏时间 + 操作：删除） -->
									<td>收藏编号</td>
									<td>收藏民宿</td>									
									<td>收藏时间</td>
									<td>操作</td>
								</tr>
								<tr align="center">								
									<td>1</td>
									<td>1</td>
									<td>1</td>
									<td><a href="#">删除</a></td>
								</tr>
							</table>
						</div>
													 
					<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
						</div>											 
			  </div>
			</div>
		</div>
		
		<!-- 模态框4：修改密码  -->
		<div class="modal fade" id="myModal4">
			<div class="modal-dialog">
				<div class="modal-content">
											 
					<!-- 模态框头部 -->
						<div class="modal-header">
						<h4 class="modal-title">修改密码</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>
													 
					<!-- 模态框主体 -->
						<div class="modal-body">
							<P>原 密 码： <input type="password" placeholder="请输入原密码"/></P>
							<p>新 密 码： <input type="password" placeholder="请输新密码"/></p>
							<p>再次输入：<input type="password" placeholder="请输入新密码"/></p>
						</div>
					<!-- 模态框底部 -->
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-secondary" data-dismiss="modal">提交</button>
						</div>											 
			  </div>
			</div>
		</div>
    <script>
    	$(document).ready(function(){
    		$(document).on("click",".classynav .personalData",function(){
        		
        	});
    	});
    </script>
<!--#################################星级评分javascript ########################################-->
   <script type="text/javascript">
		var check = 0; //该变量是记录当前选择的评分
		var time = 0; //该变量是统计用户评价的次数，这个是我的业务要求统计的（改变评分不超过三次），可以忽略
		/*over()是鼠标移过事件的处理方法*/
		function over(param) {
			if(param == 1) {
				$("#star1").attr("src", "img/comment-img/star_red.png"); //第一颗星星亮起来，下面以此类推
				$("#messageInfo").html("很差"); //设置提示语，下面以此类推
			} else if(param == 2) {
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star_red.png");
				$("#messageInfo").html("比较差");
			} else if(param == 3) {
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star_red.png");
				$("#star3").attr("src", "img/comment-img/star_red.png");
				$("#messageInfo").html("一般");
			} else if(param == 4) {
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star_red.png");
				$("#star3").attr("src", "img/comment-img/star_red.png");
				$("#star4").attr("src", "img/comment-img/star_red.png");
				$("#messageInfo").html("比较好");
			} else if(param == 5) {
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star_red.png");
				$("#star3").attr("src", "img/comment-img/star_red.png");
				$("#star4").attr("src", "img/comment-img/star_red.png");
				$("#star5").attr("src", "img/comment-img/star_red.png");
				$("#messageInfo").html("很好");
			}
		}
		/*out 方法是鼠标移除事件的处理方法，当鼠标移出时，恢复到我的打分情况*/
		function out() {
			if(check == 1) { //打分是1，设置第一颗星星亮，其他星星暗，其他情况以此类推
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star.png");
				$("#star3").attr("src", "img/comment-img/star.png");
				$("#star4").attr("src", "img/comment-img/star.png");
				$("#star5").attr("src", "img/comment-img/star.png");
				$("#messageInfo").html("");
			} else if(check == 2) {
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star_red.png");
				$("#star3").attr("src", "img/comment-img/star.png");
				$("#star4").attr("src", "img/comment-img/star.png");
				$("#star5").attr("src", "img/comment-img/star.png");
				$("#messageInfo").html("");
			} else if(check == 3) {
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star_red.png");
				$("#star3").attr("src", "img/comment-img/star_red.png");
				$("#star4").attr("src", "img/comment-img/star.png");
				$("#star5").attr("src", "img/comment-img/star.png");
				$("#messageInfo").html("");
			} else if(check == 4) {
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star_red.png");
				$("#star3").attr("src", "img/comment-img/star_red.png");
				$("#star4").attr("src", "img/comment-img/star_red.png");
				$("#star5").attr("src", "img/comment-img/star.png");
				$("#messageInfo").html("");
			} else if(check == 5) {
				$("#star1").attr("src", "img/comment-img/star_red.png");
				$("#star2").attr("src", "img/comment-img/star_red.png");
				$("#star3").attr("src", "img/comment-img/star_red.png");
				$("#star4").attr("src", "img/comment-img/star_red.png");
				$("#star5").attr("src", "img/comment-img/star_red.png");
				$("#messageInfo").html("");
			} else if(check == 0) {
				$("#star1").attr("src", "img/comment-img/star.png");
				$("#star2").attr("src", "img/comment-img/star.png");
				$("#star3").attr("src", "img/comment-img/star.png");
				$("#star4").attr("src", "img/comment-img/star.png");
				$("#star5").attr("src", "img/comment-img/star.png");
				$("#messageInfo").html("");
			}
		}
		/*click()点击事件处理，记录打分*/
		function click(param) {
			time++; //记录打分次数
			check = param; //记录当前打分
			out(); //设置星星数
			$("#score").prop("value",check);
		}
	</script>
	</body>
</html>